<template>
  <header class="header can-sticky">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="inner">
            <!-- Logo -->
            <div class="logo">
              <NuxtLink to="/" class="d-flex h-100">
                <img src="~/assets/images/logo-3.png" alt="logo" class="image-fit-contain" />
              </NuxtLink>
            </div>
            <!-- Logo -->
            <!-- Nav -->
            <TheNavigation :class="['navigation', { open: isMenuOpen }]" />
            <!-- Nav -->
            <MobileNav v-model="isMenuOpen" />
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->
  <!-- Subheader Start -->
  <div class="section-bg section-padding subheader" :style="{ backgroundImage: `url(${subheader})` }">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="text-white page-title">{{ t("nav.consulting_industry_news") }}</h2>
        </div>
      </div>
    </div>
  </div>

  <!-- Services End -->
  <!-- How It Work Start -->

  <div class="section-padding">
    <div class="container">
      <div class="row justify-content-center">
        <div v-for="item in orgState.list" :key="item.id" class="col-lg-3 col-md-6">
          <!-- 若无详情页，可把 NuxtLink 改成 <a href="#"> -->
          <NuxtLink :to="`/consulting/industry-news/${item.id}`" class="service_box style_2 w-full">
            <!-- <i :class="'icon'">123</i> -->
            <div class="flex items-center justify-center h-40 overflow-hidden">
              <img :src="item.image_url" :alt="item.title" class="image-fit" />
            </div>
            <h5 class="title">{{ item.title }}</h5>
            <p class="text text-clamp-2">{{ item.summary }}</p>
          </NuxtLink>
        </div>

        <!-- Item -->
        <!-- <div class="col-12 text-center">
          <a href="services.html" class="thm-btn btn-rounded">
            <span class="button_title">View More</span>
          </a>
        </div> -->
      </div>
      <div class="row">
        <div class="col-12">
          <nav>
            <ul class="pagination">
              <li class="page-item" :class="{ disabled: orgState.current_page === 1 }">
                <a class="page-link" href="javascript:void(0)" aria-label="Previous" @click.prevent="goTo(orgState.current_page - 1)">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li v-for="p in pages" :key="String(p)" class="page-item" :class="{ active: p === orgState.current_page, disabled: p === '…' }">
                <span v-if="p === '…'" class="page-link">…</span>
                <a v-else class="page-link" href="javascript:void(0)" @click.prevent="goTo(p as number)">{{ p }}</a>
              </li>
              <!-- Next -->
              <li class="page-item" :class="{ disabled: orgState.current_page === totalPages }">
                <a class="page-link" href="javascript:void(0)" aria-label="Next" @click.prevent="goTo(orgState.current_page + 1)">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>

  <!-- How It Work end -->
  <!-- Footer Start -->
  <TheFooter />

  <!-- Footer End -->
  <!-- Copyright Start -->
  <div class="thm-bg-color-one copyright">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <p class="mb-0">
            Copyright © <span id="year"></span>.
            <a target="_blank" href="#" title=" 科技创新院" class="text-white"> 科技创新院</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->
  <a href="#" data-target="html" class="back-to-top ft-sticky" style="">
    <i class="fal fa-long-arrow-up"></i>
  </a>
</template>

<script setup lang="ts">
import subheader from "~/assets/images/subheader.jpg";
import howitworks from "~/assets/images/howitworks.jpg";
import TheNavigation from "~/component/TheNavigation.vue";
import TheFooter from "~/component/TheFooter.vue";
import MobileNav from "~/component/MobileNav.vue";
import { getFetchData } from "~/composables/getData";

const isMenuOpen = ref(false);
const { t } = useI18n();

const orgState = reactive({
  list: [] as any[],
  page_index: 1,
  page_limit: 8,
  loading: false,
  hasMore: true,
  last_page: 1,
  current_page: 1,
  total: 0,
});

const totalPages = computed(() => orgState.last_page || Math.max(1, Math.ceil(orgState.total / (orgState.page_limit || 1))));

// 生成页码（含省略号）
const pages = computed<(number | "…")[]>(() => {
  const total = totalPages.value;
  const curr = orgState.current_page;
  const delta = 2; // 当前页左右各展示几个
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);

  const range = new Set<number>([1, total]);
  for (let i = Math.max(1, curr - delta); i <= Math.min(total, curr + delta); i++) {
    range.add(i);
  }
  const arr = Array.from(range).sort((a, b) => a - b);
  const out: (number | "…")[] = [];
  for (let i = 0; i < arr.length; i++) {
    out.push(arr[i]);
    if (i < arr.length - 1 && arr[i + 1] - arr[i] > 1) out.push("…");
  }
  return out;
});

async function goTo(page: number) {
  if (page < 1 || page > totalPages.value || page === orgState.current_page) return;
  await fetchOrg(page);
}

async function fetchOrg(page_index: number) {
  orgState.loading = true;
  try {
    const res: any = await getFetchData({
      url: "/api/news_get_list",
      opts: { page_index, page_limit: orgState.page_limit, type: 0 },
      method: "get",
    });
    const list = res.data.data;
    orgState.list = list;

    // 依据 total 判断是否还有更多；没有 total 就用“返回数量 < pageSize”判断
    if (typeof res?.data?.total === "number") {
      const total = res.data.total as number;
      orgState.hasMore = orgState.list.length < total;
    } else {
      orgState.hasMore = list.length === orgState.page_limit;
    }

    orgState.last_page = res.data.last_page;
    orgState.current_page = res.data.current_page;
    orgState.total = res.data.total;
  } finally {
    orgState.loading = false;
  }
}

await fetchOrg(orgState.page_index);
</script>
<style scoped lang="less">
.text-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
